import React, {useEffect, useState} from "react";
import {getRoomCount} from "../../../api/api.js";
import {Avatar, Col, Empty, Row, Table, Tag} from "@douyinfe/semi-ui";
import {IllustrationNoResult, IllustrationNoResultDark} from "@douyinfe/semi-illustrations";
import Room_T1 from "./compents/Room_T1.jsx";
import Room_AForm from "./compents/Room_AForm.jsx";
import Room_T2 from "./compents/Room_T2.jsx";
import {IconEdit} from "@douyinfe/semi-icons";
import Room_EForm from "./compents/Room_EForm.jsx";
import {Adjustment, Family} from "@icon-park/react";

function Room_table() {
    const [dataSource, setData] = useState();
    const [currentPage, setPage] = useState(1);
    const [totaal, settotal] = useState(0);
    const [pSize, setPSize] = useState(4);
    useEffect(()=>{
        const form = new FormData;
        form.append("pageNo",1)
        form.append("pageSize",5)
        getRCount(form);

    },[])
    async function getRCount(form){
        const res = await getRoomCount(form)
        console.log(res)
        res.data.data.data.forEach(v=>{
            if (v.isable==1){
                v.isable =  <Tag color="green" type="light">正在使用</Tag>
            }else {
                v.isable = <Tag color="red" type="light">暂停使用</Tag>
            }
            if (v.sex==1){
                v.sex2 = 1
                v.sex =  <Tag color="light-blue" type="light">男寝</Tag>
            }else {
                v.sex2 = 0
                v.sex = <Tag color="pink" type="light">女寝</Tag>
            }
            if (v.typee==1){
                v.typee = <Tag color="amber" type="light">寝室</Tag>
            }
            v.specification = v.specification+"人"
            v.numStudents = v.numStudents+"人"
        })
        settotal(res.data.data.count)
        let tableData = {...res.data.data.data}
        const colorArray = ["amber", "blue", "cyan", "green", "grey", "indigo", "light-blue", "light-green", "lime", "orange", "pink", "purple", "red", "teal", "violet", "yellow"]
        const colorLength = colorArray.length - 1
        let arr = []

        Object.keys(tableData).forEach((key) => {
            tableData[key].avatarBg = colorArray[parseInt(Math.random() * (colorLength + 1),10)]
            tableData[key].key = tableData[key].rl
            arr.push(tableData[key])
        })
        console.log(arr)
        setData(arr)
    }
    const rowSelection = {
        getCheckboxProps: record => ({
            disabled: record.name === '设计文档', // Column configuration not to be checked
            name: record.name,
        }),
        onSelect: (record, selected) => {
            console.log(`select row: ${selected}`, record);
        },
        onSelectAll: (selected, selectedRows) => {
            console.log(`select all rows: ${selected}`, selectedRows);
        },
        onChange: (selectedRowKeys, selectedRows) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
    };

    const columns = [
        {
            title: '所在寝室楼',
            dataIndex: 'buildName',
            render: (text, record, index) => {
                return (
                    <div>
                        <Avatar size="small" color={record.avatarBg} style={{ marginRight: 4 }}>
                            {typeof text === 'string' && text.slice(0, 1)}
                        </Avatar>
                        {text}
                    </div>
                );
            },
        },
        {
            title: '寝室号',
            dataIndex: 'rid',

        },
        {
            title: '寝室状态',
            dataIndex: 'isable',


        },
        {
            title: '寝室规格',
            dataIndex: 'specification',

        },
        {
            title: '房间类型',
            dataIndex: 'typee',

        },
        {
            title: '入住人数',
            dataIndex: 'numStudents',

        },
        {
            title: '寝室楼性别',
            dataIndex: 'sex',

        },
        {
            title: '操作',
            dataIndex: 'operate',
            render: (text, record) => (<Room_EForm mess={[record
                ]}></Room_EForm>
            ),
        },
    ];
    const empty = (
        <Empty
            image={<IllustrationNoResult />}
            darkModeImage={<IllustrationNoResultDark />}
            description={'无寝室信息'}
        />
    );
     async function handlePageChange(currentPage, pageSize) {
            setPSize(pageSize)
            setPage(currentPage)
            let form = new FormData()
            form.append('pageSize', pageSize)
            form.append('pageNo', currentPage)
            const res =  await getRCount(form)
    }
    return (
        <>
            <div style={{marginLeft:"85%",marginBottom:"1%"}}> </div>
            <Row>
                <Col span={12}>
                    <h2 style={{display:'flex',alignItems:'center'}}><Family theme="outline" size="24" fill="#4a90e2"/> 入驻人数占比</h2>
                    <Room_T1></Room_T1>
                </Col>
                <Col span={12}>
                    <h2><Adjustment theme="outline" size="24" fill="#4a90e2"/> 寝室楼所属寝室数量</h2>
                    <Room_T2></Room_T2>
                </Col>
            </Row>
            <h2 style={{display:'flex',alignItems:'center'}}><IconEdit style={{marginRight:'5px'}} />寝室管理</h2>
            <Room_AForm></Room_AForm>
            <Table
                style={{ minHeight: 350 }}
                columns={columns}
                dataSource={dataSource}
                pagination={{
                    currentPage:currentPage,
                    pageSize: pSize,
                    total: totaal,
                    showSizeChanger: true,
                    pageSizeOpts: [5, 10, 20, 40, 80],
                    onChange: handlePageChange,
                }}
                empty={empty}
                rowSelection={rowSelection}
            />
        </>
    );
}
export default Room_table;